<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <link rel="icon" href="/favicon.ico" type="image/x-icon">
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">

    <title>正则可视化</title>
    <meta name="keywords" content="正则可视化,正则表达式,常用正则,正则图解,正则测试,正则生成,正则,visual,regexp,expression,wangweilin,wwl,w-wl,"/>
    <meta name="description" content="正则表达式图形化工具、常用的正则表达式及正则表达式语法手册。"/>

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="renderer" content="webkit">
    <base target="_blank"/>

    <meta name="format-detection" content="telephone=no"/>
    <meta name="format-detection" content="email=no"/>
    <meta name="msapplication-tap-highlight" content="no"/>
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>

    <script>
        if(location.hostname.includes('wangweilin')) location.hostname='wangwl.net';
        var _hmt = _hmt || [];
        (function () {
            var hm = document.createElement("script");
            hm.src = "https://hm.baidu.com/hm.js?49992610cb4f5184c680641afcb2c43e";
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(hm, s);
        })();
    </script>

</head>
<body>

<nav>
    <span class="rightLink">
        <a href="https://gitee.com/w-wl/visualRegexPage/issues">Issues</a>
        <a href="/" target="_self">首页</a>
    </span>
</nav>

<div class="topBtn">
    <button class="asideBtn" id="toggleAside">
        <span class="asideBtnIcon">
            <span class="iconItem iconBarTop"></span>
            <span class="iconItem iconBarMid"></span>
            <span class="iconItem iconBarMid"></span>
            <span class="iconItem iconBarBot"></span>
        </span>
        <span class="asideBtnTxt">常用正则</span>
    </button>
</div>


<aside class="pageAside" id="pageAside">

    <ul>
        <li><span data-reg="url">URL</span></li>
        <li><span data-reg="email">Email</span></li>
        <li><span data-reg="postcode">邮编</span></li>
        <li><span data-reg="idNum">身份证</span></li>
        <li><span data-reg="trim">首尾空格</span></li>
        <li><span data-reg="singleChar">半角字符</span></li>
        <li><span data-reg="doubleChar">全角字符</span></li>
        <li><span data-reg="ie">userAgent检测IE</span></li>
        <li><span data-reg="chrome">userAgent检测Chrome</span></li>
        <li><span data-reg="safari">userAgent检测Safari</span></li>
        <li><span data-reg="firefox">userAgent检测Firefox</span></li>
        <li><span data-reg="ios">userAgent检测IOS</span></li>
        <li><span data-reg="android">userAgent检测Android</span></li>
        <li><span data-reg="wechat">userAgent检测微信</span></li>
        <li><span data-reg="sp1">m~n个数字</span></li>
        <li><span data-reg="sp2">只能是英文、数字、下划线</span></li>
        <li><span data-reg="sp3">字母开头且只能是英文数字下划线</span></li>
        <li><span data-reg="int">整数</span></li>
        <li><span data-reg="positiveInt">正整数</span></li>
        <li><span data-reg="negativeInt">负整数</span></li>
        <li><span data-reg="num">数字</span></li>
        <li><span data-reg="positiveNum">正数</span></li>
        <li><span data-reg="negativeNum">负数</span></li>
        <li><span data-reg="ipv4">IPv4</span></li>
    </ul>

</aside>
<div class="pageAsideCover" id="pageAsideCover"></div>

<main class="pageMain">

    <div class="formCtl" id="regexSource">
        <input class="formInput">
        <span class="formTitle">请输入正则表达式</span>
        <span class="formErrorTip"></span>
    </div>

    <div class="formCtl miniTitle" id="regexFlag">
        <span class="formChb">
            <input type="checkbox" id="regexFlag_g" value="g"><label for="regexFlag_g">g</label>
        </span>
        <span class="formChb">
            <input type="checkbox" id="regexFlag_i" value="i"><label for="regexFlag_i">i</label>
        </span>
        <span class="formChb">
            <input type="checkbox" id="regexFlag_m" value="m"><label for="regexFlag_m">m</label>
        </span>
        <span class="formChb">
            <input type="checkbox" id="regexFlag_u" value="u"><label for="regexFlag_u">u</label>
        </span>
        <span class="formChb">
            <input type="checkbox" id="regexFlag_y" value="y"><label for="regexFlag_y">y</label>
        </span>
        <span class="formTitle">请选择修饰符</span>

        <a class="regexLink" href="http://wangwl.net/static/pages/jsregexp.html" title="点击查看修饰符详情">?</a>
    </div>


    <div class="figure" id="figure">
        <!-- 动态的在figure中添加canvas标签 -->
    </div>

    <div class="log">
        <p>var str = "<span class="logInput" id="logInput">
                <span class="logInputHolder"></span>
                <textarea></textarea>
            </span>"; //输入要匹配的字符串
        </p>
        <p>var regex = new RegExp("<span id="logRegSource"></span>","<span id="logRegFlags"></span>");</p>
        <p>
            <span class="logSelectWrap" >
                <select class="logSelect" id="logSelect">
                    <option value="exec">regex.exec( str )</option>
                    <option value="match">str.match( regex )</option>
                    <option value="search">str.search( regex )</option>
                    <option value="replace">str.replace( regex )</option>
                    <option value="split">str.split( regex )</option>
                </select>
            </span>

        </p>
        <pre class="logOutput" id="logOutput"></pre>
    </div>


    <div class="syntax">
        <h2>支持语法</h2>
        <ul>
            <li><span class="key">[abc]</span><span class="desc">单个字符:a或b或c</span></li>
            <li><span class="key">[^abc]</span><span class="desc">a,b,c以外的单个字符</span></li>
            <li><span class="key">[a-zA-Z0-9]</span><span class="desc">字符范围</span></li>
            <li><span class="key">.</span><span class="desc">任意字符</span></li>
            <li><span class="key">\s</span><span class="desc">空字符</span></li>
            <li><span class="key">\S</span><span class="desc">非空字符</span></li>
            <li><span class="key">\d</span><span class="desc">数字字符</span></li>
            <li><span class="key">\D</span><span class="desc">非数字字符</span></li>
            <li><span class="key">\w</span><span class="desc">单词(字母，数字，下划线)</span></li>
            <li><span class="key">\W</span><span class="desc">非单词</span></li>
            <li><span class="key">\b</span><span class="desc">单词边界</span></li>
            <li><span class="key">\b</span><span class="desc">非单词边界</span></li>
            <li><span class="key">^</span><span class="desc">开头</span></li>
            <li><span class="key">$</span><span class="desc">结尾</span></li>
            <li><span class="key">(...)</span><span class="desc">分组</span></li>
            <li><span class="key">(a|b)</span><span class="desc">a或b</span></li>
            <li><span class="key">a*</span><span class="desc">重复0次或多次</span></li>
            <li><span class="key">a?</span><span class="desc">重复0次或1次</span></li>
            <li><span class="key">a+</span><span class="desc">重复1次或多次</span></li>
            <li><span class="key">a{3}</span><span class="desc">重复3次</span></li>
        </ul>
        <ul>
            <li><span class="key">a{3,}</span><span class="desc">重复3次或多次</span></li>
            <li><span class="key">a{3,5}</span><span class="desc">重复3到5次</span></li>
            <li><span class="key">?</span><span class="desc">非贪婪匹配</span></li>
            <li><span class="key">(?:abc)</span><span class="desc">非捕获分组</span></li>
            <li><span class="key">(?=abc)</span><span class="desc">正向匹配abc</span></li>
            <li><span class="key">(?!abc)</span><span class="desc">正向不匹配abc</span></li>
            <li><span class="key">\xhh</span><span class="desc">十六进制hh字符</span></li>
            <li><span class="key">\uhhhh</span><span class="desc">十六进制hhhh字符</span></li>
            <li><span class="key">\u{hhhh}</span><span class="desc">(仅当设置了u标志时)十六进制hhhh字符</span></li>
            <li><span class="key">\cX</span><span class="desc">控制字符</span></li>
            <li><span class="key">\0</span><span class="desc">空字符</span></li>
            <li><span class="key">\a</span><span class="desc">alert字符</span></li>
            <li><span class="key">\t</span><span class="desc">制表符</span></li>
            <li><span class="key">\n</span><span class="desc">换行符</span></li>
            <li><span class="key">\v</span><span class="desc">垂直制表符</span></li>
            <li><span class="key">\f</span><span class="desc">换页符</span></li>
            <li><span class="key">\r</span><span class="desc">回车符</span></li>
            <li><span class="key">\e</span><span class="desc">escape字符</span></li>
            <li><span class="key">[\b]</span><span class="desc">退格符</span></li>

        </ul>
    </div>

    <div class="note">
        <h2>相关链接</h2>
        <p><a href="http://urlregex.com/">URL 摘录链接</a></p>
        <p><a href="https://www.leveluplunch.com/java/examples/common-regular-expressions/#email-address-regex">Email
            摘录链接</a></p>
        <p>
            <a href="https://stackoverflow.com/questions/1449817/what-are-some-of-the-most-useful-regular-expressions-for-programmers">整数/正整数/负整数/数字/正数/负数/IPv4
                摘录链接</a></p>
        <p>身份证摘录链接忘记备注了</p>
        <p>其余常用正则，均为<a href="/"><abbr title="WangWeiLin">个人</abbr></a>总结，如有错误烦请到<a
                href="https://gitee.com/w-wl/visualRegexPage/issues">issues</a>中帮忙指正。</p>
        <p>npm package: <a href="https://www.npmjs.com/package/visual-regex">visual-regex</a></p>
    </div>

</main>


</body>
</html>